<script setup lang="ts">
import { computed, ref } from "vue";
import { useRole } from "./utils/hook";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { TakeawayBox, Lock, NoSmoking, Position, SoldOut } from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'

const size = ref<ComponentSize>('default')

defineOptions({
  name: "CustomerRules"
});

const formRef = ref();
const {
  permissions,

  dataForm,
  openDialog,
} = useRole();

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default
  }
})
</script>

<template>
 
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
      v-if="permissions.is_dataRule_set"
    >
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:settings-3-line')"
          @click="openDialog(dataForm)"
        >
          设置
        </el-button>
      </el-form-item>
    </el-form>

    <div class="mt-2">
      <el-descriptions title="" size="large" label-width="240" :column="3" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle"><TakeawayBox /></el-icon>
              客户领取数阀值
            </div>
          </template>{{dataForm?.gain_limt}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle"><Lock /></el-icon>
              客户锁定数阀值
            </div>
          </template>{{dataForm?.lock_limit}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle"><NoSmoking /></el-icon>
              公海客户静默期（天）
            </div>
          </template>{{dataForm?.silent_day}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle"><Position /></el-icon>
              释放到公海因未跟进天数
            </div>
          </template>{{dataForm?.valid_day}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle"><SoldOut /></el-icon>
              进入公海次数上限
            </div>
          </template>{{dataForm?.sea_limit}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.main {
  margin: 12px 12px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
